import { defineComponent, reactive ,watch} from "vue";
import styles from "./popup.module.less";
import { CloseOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      isShow: false,
      form: {
        province: null,
        city: null,
        company_name: null,
        address: null,
        linkerName: null,
        tell: null,
        code: null,
      }
    } as any)

    watch(() => state.isShow, (nv) => {
      if (!nv) {
        state.form.province = '';
        state.form.city = '';
        state.form.company_name = '';
        state.form.address = '';
        state.form.linkerName = '';
        state.form.tell = '';
        state.form.code = '';
      }
    })

    //打开弹窗
    const open = () => {
      state.isShow = true;
    }
    //确认
    const confirm = () =>{

    }
    expose({
      open,
    })

    return () => (
      <div class={styles.popup} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles['header-box']}>
            <span class={styles.title}>分社信息</span>
            <CloseOutlined class={styles['close-icon']} onClick={() => { state.isShow = false }} />
          </div>
          <div class={styles.container}>
            <div class={styles['form-box']}>
              <a-form model={state.form} label-col={{ style: { width: '120px', textAlign: 'left' } }} layout="inline">
                <a-form-item
                  label="分社所在省"
                  required
                >
                  <a-select v-model:value={state.form.province} style={{ width: '144px', marginBottom: '20px' }}>
                    <a-select-option value="浙江省">浙江省</a-select-option>
                    <a-select-option value="江苏省">江苏省</a-select-option>
                    <a-select-option value="安徽省">安徽省</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  label="分社所在市"
                  required
                >
                  <a-select v-model:value={state.form.city} style={{ width: '144px', marginBottom: '20px' }}>
                    <a-select-option value="宁波市">宁波市</a-select-option>
                    <a-select-option value="温州市">温州市</a-select-option>
                    <a-select-option value="杭州市">杭州市</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  label="分社名称"
                  required
                >
                  <a-input style={{ width: '144px', height: '40px', marginBottom: '20px' }} v-model:value={state.form.company_name} />
                </a-form-item>
                <a-form-item
                  label="分社地址"
                  required
                >
                  <a-input style={{ width: '144px', height: '40px', marginBottom: '20px' }} v-model:value={state.form.address} />
                </a-form-item>
                <a-form-item
                  label="联系人"
                  required
                >
                  <a-input style={{ width: '144px', height: '40px', marginBottom: '20px' }} v-model:value={state.form.linkerName} />
                </a-form-item>
                <a-form-item
                  label="联系电话"
                  required
                >
                  <a-input style={{ width: '144px', height: '40px', marginBottom: '20px' }} v-model:value={state.form.tell} />
                </a-form-item>
                <a-form-item
                  label="组织机构代码"
                  required
                >
                  <a-input style={{ width: '300px', height: '40px', marginBottom: '20px' }} v-model:value={state.form.code} />
                </a-form-item>
              </a-form>
            </div>
            <div class={styles['footer-box']}>
              <div class={styles.btn} onClick={() => { state.isShow = false }}>取消</div>
              <div class={styles.btn} onClick={() => { confirm() }}>确认</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})